﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="viewSlideshow.aspx.cs"
    Inherits="WebApplicationTestShowPic.viewSlideshow" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>View Slideshow</title>
    <link type="text/css" href="/_layouts/JM.JCY.Resource/styles/JCYStyle.css" rel="Stylesheet" />
    <style type="text/css">
        #imgback
        {
            cursor: hand;
        }
        #imgnext
        {
            cursor: hand;
        }
        #imgplay
        {
            cursor: hand;
        }
        a
        {
            text-decoration: none;
        }
        a:hover
        {
            text-decoration: underline;
        }
    </style>
    <script type="text/javascript" src="/_layouts/JM.JCY.Resource/scripts/jquery-1.6.js"></script>
    <script type="text/javascript">

       var imagesArrow = [];
        var currentid = 1;
        var timeID = 0;
        var playsetting;
        var imageArrows;
        var referrerUrl = "";

        $(document).ready(function () {
        referrerUrl = document.referrer;
            $("#imgnext").click(function () {
                window.clearTimeout(timeID)
                nextPic("click");
            });

            $("#imgback").click(function () {
                backPic();
            });

            $("#imgplay").click(function () {

                if ($("#imgplay").attr("src") == playsetting.playpause[0]) {
                    $("#imgplay").attr("src", playsetting.playpause[1]);
                } else {
                    $("#imgplay").attr("src", playsetting.playpause[0]);
                }
                window.clearTimeout(timeID);
                timeID = window.setTimeout(function () { nextPic("next"); }, playsetting.auotplay[1]);
            });

            imageArrows =  <asp:Literal ID="llArrows" runat="server"></asp:Literal>;
            var play = new playPic({
                playid: "imgpic",
                playpause: ["/_layouts/JM.JCY.Resource/images/play.png", "/_layouts/JM.JCY.Resource/images/pause.png"],
                imageArrows: imageArrows,
                auotplay: [true, <asp:Literal ID="llPlayCount" runat="server"></asp:Literal>],
                rotateplay: true
            });

            $("span[id*='lblContextAcronym'] a").css("color","#FFFFFF");
            $("a[id*='LinkButtonBacktoAlbum']").css("color","#FFFFFF");
        });

    function adjustImageSize(imageId)
     {
     var img=$("#"+imageId);
     var maxWidth = 1200; 

     var height=img.height();
     var width =img.width();
     var ratio = 0;  
     ratio=maxWidth/width;

    if(width > maxWidth){
       img.width(width);
       img.css("width", maxWidth); 
       img.css("height", height*ratio); 
      }    

    }

        function nextPic(keyword) {
            if (keyword == "next" && $("#imgplay").attr("src") == playsetting.playpause[0]) {
                window.clearTimeout(timeID);
                return;
            }
            if (currentid == imagesArrow.length) {
                if (playsetting.rotateplay) {
                    currentid = 1;
                    $("#imgpic").attr({ src: imagesArrow[currentid - 1].src });
                     $("#imgpic").attr({ alt: imagesArrow[currentid - 1].title });
                    showUserAndMediaNum();
                } else {
                    window.clearTimeout(timeID);
                    return;
                }
            } else {
                currentid = currentid + 1;
                $("#imgpic").attr({ src: imagesArrow[currentid - 1].src });
                 $("#imgpic").attr({ alt: imagesArrow[currentid - 1].title });
                showUserAndMediaNum();
            }
            timeID = window.setTimeout(function () { nextPic("next"); }, playsetting.auotplay[1]);
        }

        function backPic() {

            if (currentid == 1) {
                currentid = imagesArrow.length;
                $("#imgpic").attr({ src: imagesArrow[currentid - 1].src });
                 $("#imgpic").attr({ alt: imagesArrow[currentid - 1].title });
                showUserAndMediaNum();
            } else {
                currentid = currentid - 1;
                $("#imgpic").attr({ src: imagesArrow[currentid - 1].src });
                 $("#imgpic").attr({ alt: imagesArrow[currentid - 1].title });
                showUserAndMediaNum();
            }

            if ($("#imgplay").attr("src") == playsetting.playpause[0]) {
                window.clearTimeout(timeID);
            } else {
                window.clearTimeout(timeID);
                timeID = window.setTimeout(function () { nextPic("next"); }, playsetting.auotplay[1]);
            }
        }

        function showUserAndMediaNum() {
            var albumname=$("#<%=HiddenAlbumname.ClientID %>").val();
            var uploader=imagesArrow[currentid - 1].alt;
            var namelength=uploader.length;
            if(namelength>30)
            {
                namelength=30;
            }
            uploader=uploader.substring(0,namelength);

           var viewAblum="<a style='color: #FFFFFF' href='javascript:goback()'>"+albumname+"</a>";
            $("#albummedianum").html(viewAblum+" - 照片 " + currentid + " / " + imagesArrow.length);
            $("#username").html("照片上传人： <a style='color: #FFFFFF' href='/Mysite/JCYPages/staffprofile/StaffProfileDetails.aspx?staffid="+imagesArrow[currentid - 1].hspace+ "&ContextId=" + $("#<%= HiddenContextId.ClientID %>").val() +"'>" + uploader + "</a>");
            $("#hDesc").text(imagesArrow[currentid - 1].longdesc);
        }

        function playPic(settings) {
            imagesArrow = [];
            for (var i = 0; i < settings.imageArrows.length; i++) {
                imagesArrow[i] = new Image();
                imagesArrow[i].src = settings.imageArrows[i][0];
                imagesArrow[i].title = settings.imageArrows[i][1];
                imagesArrow[i].longdesc=settings.imageArrows[i][2];
                imagesArrow[i].hspace=settings.imageArrows[i][3];//staffid
                imagesArrow[i].alt=settings.imageArrows[i][4];//created by
            };
            $("img[id='" + settings.playid + "']").attr("src",imagesArrow[0].src);
            if (settings.auotplay[0]) {
                $("#divnum").text(currentid + "/" + imagesArrow.length);
                timeID = window.setTimeout(function () { nextPic("next"); }, settings.auotplay[1]);
                $("#DivPlay img").attr("src", settings.playpause[1]);
            } else {
                $("#DivPlay img").attr("src", settings.playpause[0]);
            }
            playsetting = settings;
            showUserAndMediaNum();
        }

       function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regexS = "[\\?&]" + name + "=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(window.location.href);
        if (results == null)
            return "";
        else
            return decodeURIComponent(results[1].replace(/\+/g, " "));
        }

        function goback()
        {
          window.location.href=referrerUrl;
        }
    </script>
</head>
<body class="slideshow">
    <form id="form1" runat="server">
    <div id="container">
        <table class="main">
            <tr>
                <td valign="top" width="100%">
                    <table class="contentSlideshow" width="100%">
                        <tr>
                            <td>
                                <div class="gallerySlideshow">
                                    <table width="100%" class="galleryTitleSlideshow">
                                        <tr>
                                            <td>
                                                <h2 class="gallerySlideshow">
                                                    <img src="/_layouts/JM.JCY.Resource/images/fun_work.png">
                                                    相册 - View Slideshow</h2>
                                            </td>
                                            <td align="right">
                                                &nbsp;
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                <h2 id="albummedianum" class="galleryDetailSlideshow">
                                                </h2>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <h2 id="username" class="galleryDetailSlideshow">
                                                </h2>
                                            </td>
                                            <td align="right">
                                                            <img src="/_layouts/JM.JCY.Resource/images/back_link.png" width="12"/>
                                                <asp:LinkButton CssClass="galleryDetail" ID="LinkButtonBacktoAlbum" runat="server">返回相册</asp:LinkButton>
                                            </td>
                                        </tr>
                                    </table>
                                    <br />
                                    <table width="100%" style="text-align: center">
                                        <tr>
                                            <td>
                                                <img id="imgback" src="/_layouts/JM.JCY.Resource/images/back_slideshow.png">
                                            </td>
                                            <td align="center">
                                                <img id="imgpic" />
                                            </td>
                                            <td>
                                                <img id="imgnext" src="/_layouts/JM.JCY.Resource/images/next_slideshow.png">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="3" style="text-align: left">
                                                <h2 id="hDesc" class="galleryDetailSlideshow">
                                                </h2>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="3">
                                                &nbsp;
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                &nbsp;
                                            </td>
                                            <td align="center">
                                                <div id="DivPlay">
                                                    <img id="imgplay" src="/_layouts/JM.JCY.Resource/images/pause.png">
                                                </div>
                                            </td>
                                            <td>
                                                &nbsp;
                                            </td>
                                        </tr>
                                    </table>
                                    <br />
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <asp:HiddenField ID="HiddenCreater" runat="server" />
        <asp:HiddenField ID="HiddenStaffId" runat="server" />
        <asp:HiddenField ID="HiddenAlbumname" runat="server" />
        <asp:HiddenField ID="HiddenContextId" runat="server" />
    </div>
    </form>
</body>
</html>
